/******************************************************************************
* File description: MaintenanceYingGuang2JianCePianChaTable.qml
* Function: 维护-荧光检测：检测偏差表格
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-29
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0

Item {
    id: root

    /* property 定义开始 */
    property int plateRowCount: 7 // 反应板行数
    property int plateColCount: 9 // 反应板列数
    // 横向表头数组
    property var horHeaderList: ["区域", "数据", "最大值", "均值", "操作"]
    // 纵向表头数组
    property var verHeaderList: ["A", "B", "C", "D", "E", "F", "合计"]
    // 横向表头高
    property int horizontalHeaderHeight: 40
    // 纵向表头宽
    property int verticalHeaderWidth: 65
    // 左上角角落
    property string cornerColor: "#FFEBF3FF"
    property int cornerBorderWidth: 0
    property string cornerBorderColor: "transparent"
    // 表格数据
    property var tableModels: []

    // private
    property int _itemIndex: 0 // 记录每个代理对象的下表，反推出所在行列
    property var _startPoint: [-1, -1] // 记录起点坐标
    property bool _isPressed: false // 鼠标按下信号
    property int _curMouseRow: -1 // 鼠标当前所在行
    property int _curMouseCol: -1 // 鼠标当前所在列
    property var _tableModel: root.tableModels

    // 信号
    signal pressedIndex(int index) // 发送表格下标信号

    // 函数
    // 下标转行列
    function index2RowCol(index){
        return [parseInt(index / plateColCount), index % plateColCount]
    }

    // 行列转下标
    function rowCol2Index(row, col){
        return row * plateColCount + col
    }
    // 设置表格点击样式
    function setTableClickStyle(tableDelegate, index){
        var [posRow, posCol] = root.index2RowCol(index)
        // 设置起始下标和结束下标
        var startRowIndex = Math.min(posRow, root._startPoint[0])
        var endRowIndex = Math.max(posRow, root._startPoint[0])
        var startColIndex = Math.min(posCol, root._startPoint[1])
        var endColIndex = Math.max(posCol, root._startPoint[1])
        // 各个边框颜色
        var leftBorderColor = tableDelegate.leftBorder.color
        var topBorderColor = tableDelegate.topBorder.color
        var bottomBorderColor = tableDelegate.bottomBorder.color
        // 背景颜色
        var bgColor = tableDelegate.color

        // 背景
        if(tableDelegate.curRow === startRowIndex) {
            // 颜色不同则渲染
            if(bgColor !== "#1A2F42CD") tableDelegate.color = "#1A2F42CD"
        }else {
            // 颜色不同则渲染
            if(bgColor !== "transparent") tableDelegate.color = "transparent"
        }

        // 边框
        // 上，下边框
        if(tableDelegate.curRow === startRowIndex){
            // 修改颜色
            tableDelegate.topBorder.color = "#FF2F42CD"
            tableDelegate.bottomBorder.color = "#FF2F42CD"
        }else {
            tableDelegate.topBorder.color = "#FFCCCCCC"
            tableDelegate.bottomBorder.color = "#FFCCCCCC"
        }

        // 下边框
        // 判断不为上边框
        if(tableDelegate.curRow !== startRowIndex) {
            // 下一个表格的上边框
            if(tableDelegate.curRow === startRowIndex + 1){
                // 修改颜色
                tableDelegate.topBorder.color = "#FF2F42CD"
            }else {
                tableDelegate.topBorder.color = "#FFCCCCCC"
            }
        }

        // 重新绘制边框
        // 颜色不同则渲染
        if(topBorderColor !== tableDelegate.topBorder.color) tableDelegate.topBorder.requestPaint()
        if(bottomBorderColor !== tableDelegate.bottomBorder.color) tableDelegate.bottomBorder.requestPaint()
    }

    /* property 定义结束 */

    GLOBAL{id: global}

    Rectangle {
        id: table
        anchors.fill: parent
        color: "#FFEBF3FF"
        clip: true
        border.width: 1
        border.color: "transparent"

        // 横向表头
        Item {
            id: horizontalHeader
            width: parent.width - root.verticalHeaderWidth
            height: horizontalHeaderHeight
            anchors {
                top: parent.top
                left: parent.left
            }

            Row {
                spacing: 0

                Repeater {
                    model: root.horHeaderList

                    Rectangle {
                        width: index === 0 ?
                                   root.verticalHeaderWidth
                                 :
                                   index === 1 ?
                                       (horizontalHeader.width-140) / (plateColCount-2) * 5
                                     :
                                       index === 4 ?
                                           140
                                         :
                                           (horizontalHeader.width-140) / (plateColCount-2)
                        height: horizontalHeader.height
                        color: "transparent"
                        border.width: 0

                        Text {
                            text: qsTr(modelData)
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#FF222222"
                        }

                        Component.onCompleted: {
                            // 画边框
                            global.createLeftBorder(this, 2, "#FFCCCCCC")
                            global.createTopBorder(this, 2, "#FFCCCCCC")
                        }
                    }
                }
            }
        }

        // 纵向表头
        Item {
            id: verticalHeader
            width: verticalHeaderWidth
            height: parent.height - horizontalHeader.height
            anchors {
                top: parent.top
                left: parent.left
                topMargin: horizontalHeaderHeight
            }

            Column {
                spacing: 0

                Repeater {
                    model: root.verHeaderList

                    Rectangle {
                        width: verticalHeader.width
                        height: verticalHeader.height / plateRowCount
                        color: "transparent"
                        border.width: 0

                        Text {
                            text: qsTr(modelData)
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#FF222222"
                        }

                        Component.onCompleted: {
                            // 画上边框
                            global.createTopBorder(this, 2, "#FFCCCCCC")
                            // 结尾画下边框
                            global.createBottomBorder(this, 2, "#FFCCCCCC", index === root.plateRowCount-1)
                        }
                    }
                }
            }
        }


        // 表格内容
        TableView {
            id: tableContent
            width: horizontalHeader.width
            height: verticalHeader.height
            anchors {
                top: parent.top
                left: parent.left
                topMargin: horizontalHeader.height
                leftMargin: verticalHeader.width
            }
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            columnSpacing: 0
            rowSpacing: 0

            columnWidthProvider: function(column){
                return column === 7 ?
                            140
                          :
                            (tableContent.width-140) / (plateColCount-2)
            }

            rowHeightProvider: function(row){
                return tableContent.height / plateRowCount
            }

            onWidthChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            onHeightChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            model: TableModel {
                id: tableModel

                TableModelColumn {display: "数据1"}
                TableModelColumn {display: "数据2"}
                TableModelColumn {display: "数据3"}
                TableModelColumn {display: "数据4"}
                TableModelColumn {display: "数据5"}
                TableModelColumn {display: "最大值"}
                TableModelColumn {display: "均值"}
                TableModelColumn {display: "操作"}

                rows: root._tableModel
            }

            delegate: DelegateChooser{
                id: tableDelegateChoice

                // 其他部分
                // 数据1
                DelegateChoice {
                    column: 0
                    delegate: Rectangle {
                        id: data1
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        Component.onCompleted: {
                            // 边框
                            data1.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            data1.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            data1.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(data1, index)
                            }
                        }
                    }
                }

                // 数据2
                DelegateChoice {
                    column: 1
                    delegate: Rectangle {
                        id: data2
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        Component.onCompleted: {
                            // 边框
                            data2.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            data2.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            data2.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(data2, index)
                            }
                        }
                    }
                }

                // 数据3
                DelegateChoice {
                    column: 2
                    delegate: Rectangle {
                        id: data3
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        Component.onCompleted: {
                            // 边框
                            data3.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            data3.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            data3.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(data3, index)
                            }
                        }
                    }
                }

                // 数据4
                DelegateChoice {
                    column: 3
                    delegate: Rectangle {
                        id: data4
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        Component.onCompleted: {
                            // 边框
                            data4.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            data4.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            data4.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(data4, index)
                            }
                        }
                    }
                }

                // 数据5
                DelegateChoice {
                    column: 4
                    delegate: Rectangle {
                        id: data5
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        Component.onCompleted: {
                            // 边框
                            data5.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            data5.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            data5.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(data5, index)
                            }
                        }
                    }
                }

                // 最大值
                DelegateChoice {
                    column: 5
                    delegate: Rectangle {
                        id: maxValueItem
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        Component.onCompleted: {
                            // 边框
                            maxValueItem.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            maxValueItem.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            maxValueItem.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(maxValueItem, index)
                            }
                        }
                    }
                }

                // 均值
                DelegateChoice {
                    column: 6
                    delegate: Rectangle {
                        id: meanValueItem
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        Component.onCompleted: {
                            // 边框
                            meanValueItem.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            meanValueItem.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            meanValueItem.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(meanValueItem, index)
                            }
                        }
                    }
                }

                // 操作
                DelegateChoice {
                    column: 7
                    delegate: Rectangle {
                        id: operator
                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: tableContent.columnWidthProvider(column)
                        implicitHeight: tableContent.rowHeightProvider(row)
                        color: "transparent"

                        // 按钮
                        RowLayout {
                            anchors.fill: parent
                            spacing: 10

                            CustomHorSpacerItem {}

                            // 读取按钮
                            Item {
                                id: readOutBtn
                                Layout.alignment: Qt.AlignVCenter
                                Layout.preferredWidth: readOutText.implicitWidth
                                Layout.preferredHeight: readOutText.implicitHeight

                                Label {
                                    id: readOutText
                                    font {
                                        family: "Alibaba PuHuiTi"
                                        pixelSize: 16
                                    }
                                    color: "#FF1677FF"
                                    text: "读取"
                                }

                                MouseArea {
                                    anchors.fill: parent
                                    cursorShape: Qt.PointingHandCursor
                                    onClicked: {
                                        // root.readOuteteSig(_tableMoreadOut[row]["id"])
                                    }
                                }
                            }

                            // 分割线
                            Rectangle {
                                Layout.preferredWidth: 2
                                Layout.preferredHeight: readOutBtn.height
                                Layout.alignment: Qt.AlignVCenter
                                color: "#FF222222"
                            }

                            // 设置按钮
                            Item {
                                id: setBtn
                                Layout.alignment: Qt.AlignVCenter
                                Layout.preferredWidth: setText.width
                                Layout.preferredHeight: setText.height

                                Label {
                                    id: setText
                                    font {
                                        family: "Alibaba PuHuiTi"
                                        pixelSize: 16
                                    }
                                    color: "#FF1677FF"
                                    text: "设置"
                                }

                                MouseArea {
                                    anchors.fill: parent
                                    cursorShape: Qt.PointingHandCursor
                                    onClicked: {

                                    }
                                }
                            }

                            CustomHorSpacerItem {}
                        }

                        Component.onCompleted: {
                            // 边框
                            operator.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            operator.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            operator.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                        }

                        // 槽函数
                        Connections {
                            target: root
                            // 点击表格事件
                            function onPressedIndex(index){
                                root.setTableClickStyle(operator, index)
                            }
                        }
                    }
                }
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onPressed: {
                    var mouseX = mouse.x
                    var mouseY = mouse.y
                    // 边界判断
                    if(mouseX >= parent.width) mouseX = parent.width - 1
                    if(mouseY >= parent.height) mouseY = parent.height - 1
                    if(mouseX < 0) mouseX = 0
                    if(mouseY < 0) mouseY = 0
                    // 设置值
                    _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                    _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                                plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                    _startPoint = [_curMouseRow, _curMouseCol]
                    root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                    _isPressed = true
                }
                onPositionChanged: {
                    if(_isPressed){
                        var mouseX = mouse.x
                        var mouseY = mouse.y
                        // 边界判断
                        if(mouseX >= parent.width) mouseX = parent.width - 1
                        if(mouseY >= parent.height) mouseY = parent.height - 1
                        if(mouseX < 0) mouseX = 0
                        if(mouseY < 0) mouseY = 0
                        // 设置值
                        _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                    plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                        _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                                    plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                        _startPoint = [_curMouseRow, _curMouseCol]
                        root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                    }
                }
                onReleased: {
                    var mouseX = mouse.x
                    var mouseY = mouse.y
                    // 边界判断
                    if(mouseX >= parent.width) mouseX = parent.width - 1
                    if(mouseY >= parent.height) mouseY = parent.height - 1
                    if(mouseX < 0) mouseX = 0
                    if(mouseY < 0) mouseY = 0
                    // 设置值
                    _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                    _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                                plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                    _startPoint = [_curMouseRow, _curMouseCol]
                    _isPressed = false
                }
            }

            Component.onCompleted: {
                root.tableModels = [
                            {"数据1": "", "数据2": "", "数据3": "", "数据4": "", "数据5": "", "最大值": "", "均值": "", "操作": ""},
                            {"数据1": "", "数据2": "", "数据3": "", "数据4": "", "数据5": "", "最大值": "", "均值": "", "操作": ""},
                            {"数据1": "", "数据2": "", "数据3": "", "数据4": "", "数据5": "", "最大值": "", "均值": "", "操作": ""},
                            {"数据1": "", "数据2": "", "数据3": "", "数据4": "", "数据5": "", "最大值": "", "均值": "", "操作": ""},
                            {"数据1": "", "数据2": "", "数据3": "", "数据4": "", "数据5": "", "最大值": "", "均值": "", "操作": ""},
                            {"数据1": "", "数据2": "", "数据3": "", "数据4": "", "数据5": "", "最大值": "", "均值": "", "操作": ""},
                            {"数据1": "", "数据2": "", "数据3": "", "数据4": "", "数据5": "", "最大值": "", "均值": "", "操作": ""}
                        ]
            }
        }
    }
}
